<template>
    <div class="listDiv flex-row">
        <div class="flex-1 flex-column h100 pd10">
            <div class="flex-column flex-2 mb10 hidden">
                <span class="lab mini-size flex-row-center">设备列表:</span>
                <div class="flex-column pd10 mini-gray-bg radius5 base-size overflow-y flex-1">
                    <div class="mb5" v-for="(v,i) in obj.devicelist" :key="i">
                        <div class="pd10-row pd15-column w-bg pointer" @click="obj.didx[0]=i">{{v.name}}</div>
                        <div v-if="obj.didx[0]==i">
                            <div @click="obj.didx[1]=n" :class="['pd15-column', 'pr10', 'pl15', 'mini-size', 'pointer', obj.didx[1]==n?'base-mini-bg':'w-bg']" v-for="(k,n) in v.child" :key="n">{{k.name}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-column flex-1 hidden">
                <span class="lab mini-size flex-row-center">窗口列表:</span>
                <div class="flex-column pd10 mini-gray-bg radius5 base-size overflow-y flex-1">
                    <div class="mb5" v-for="(v,i) in obj.windowlist" :key="i">
                        <div class="pd10-row pd15-column w-bg pointer" @click="obj.widx[0]=i">{{v.name}}</div>
                        <div v-if="obj.widx[0]==i">
                            <div @click="obj.widx[1]=n" :class="['pd15-column', 'pr10', 'pl15', 'mini-size', 'pointer', obj.widx[1]==n?'base-mini-bg':'w-bg']" v-for="(k,n) in v.child" :key="n">{{k.name}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-3 h100 flex-center pd20">
            <div class="w100 h100 mini-gray-bg">
                <iframe class="w100 h100" src="http://www.nihaoyalong.com/fun/ys7/index.html"></iframe>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, ref, toRefs, provide, computed } from 'vue'
    import Pager from '@/components/pager.vue'
    import DelConfirm from '@/components/del_confirm.vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        devicelist: [
            {name: '北区工地', child: [
                {name: '北门左侧摄像头'},{name: '北门右侧摄像头'},
            ]},
            {name: '西区工地', child: [
                {name: '西门左侧摄像头'},{name: '西门右侧摄像头'}
            ]}
        ],
        didx: [0,0],
        windowlist: [
            {name: '视频监控窗口', child: [
                {name: 'TV.01'},{name: 'TV.02'},{name: 'TV.03'}
            ]}
        ],
        widx: [0,0],
    });
</script>

<style scoped>
.lab{}
.lab::before{content: '·'; font-size: 24px; display: inline-flex; flex-direction: row; align-items: center;}
</style>